<template>
    <view class="box">
        <!-- 客服服务 -->
        <view class="severce">
            <!-- 电话客服 -->
            <view class="iphoneserve postion" @click="to_tel()">
                <view>
                    <image class="img" src="../../static/img/Customer_service_center/kefu-Phone@3x.png"></image>
                </view>
                <view>
                    <p class="p">电话客服</p>
                    <span class="span">{{phone.at}}</span>
                </view>
            </view>
            <!-- 微信客服 -->
            <button type="default" open-type="contact">
                <view class="wxserver postion">
                    <!-- <view> -->
                        <image style="margin-right: 15rpx;width: 90rpx;height: 90rpx;border-radius: 20rpx;" src="../../static/img/Customer_service_center/kefu-Wechat@3x.png"></image>
                    <!-- </view> -->
                    <view style="display: flex;flex-direction: column;justify-content: center;">
                        <text style="font-size: 24rpx;color: #191919;text-align: left;line-height: 40rpx;">微信客服</text>
                        <text style="font-size: 22rpx;color: #bbbbbb;text-align: left;line-height: 40rpx;">24小时专属服务</text>
                    </view>
                </view>
            </button>
        </view>
        <!-- help 功能 -->
        <view class="help">
            <servicelist :helparr="item" v-for="(item, index) in helparr" :key="item.id"></servicelist>
        </view>
        <!-- 其他问题 -->
        <view class="message">
            <textarea v-model="content" class="textarea" placeholder-style="color: #cccccc" placeholder="如有其他问题请在此输入并提交"></textarea>
        </view>
        <!-- 提交按钮 -->
        <view class="buttonfooter">
            <button class="button" @click="_postAddmessage">提交</button>
        </view>
        <!-- 底部占位符 -->
        <view class="footer"></view>
    </view>
</template>

<script>
    import servicelist from './servicelist'

    export default {
        components: {
            servicelist
        },
        data() {
            return {
                // help 数据数组
                helparr: [],
                phone: {},
                content: '',
            }
        },
        onLoad() {
            this._getMessage()
        },
        methods: {
            to_tel() {
                uni.makePhoneCall({
                    phoneNumber: this.phone.tel.toString(),
                });
            },
            _getMessage() {
                this.$u.api.getMessage({code: '999'}).then(res => {
                    this.helparr = res.list;
                    this.phone = res.phone;
                }).catch(err => {
                    
                })
            },
            _postAddmessage() {
                this.$u.api.postAddmessage({
                    // name: (this.$store.state.userInfo.username || this.$store.state.userInfo.nickname),
                    name: this.$store.state.userInfo.nickname,
                    content: this.content,
                }).then(res => {
                    uni.showModal({
                        title: '提示',
                        content: '提交成功！感谢您宝贵的意见。',
                        showCancel: false,
                        success: function (res) {
                            if (res.confirm) {
                                
                            } else if (res.cancel) {
                                
                            }
                        }
                    });
                }).catch(err => {
                    
                })
            },
        },
    }
</script>

<style lang="scss" scoped>
    .box {
        padding: 30rpx;
        background-color: #EEEEEE;
    }

    // 电话客服
    .severce {
        display: flex;
        justify-content: space-between;
        height: 150rpx;

        .postion {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .img {
            margin-right: 15rpx;
            width: 90rpx;
            height: 90rpx;
            border-radius: 20rpx;
        }

        .p {
            font-size: 24rpx;
            color: #191919;
        }

        .span {
            font-size: 22rpx;
            color: #bbbbbb;
        }

        .iphoneserve {
            width: 330rpx;
            height: 150rpx;
            background-color: #ffffff;
            border-radius: 20rpx;
        }

        .wxserver {
            width: 330rpx;
            height: 150rpx;
            background-color: #ffffff;
            border-radius: 20rpx;
        }
    }

    // help 帮助
    .help {
        margin-top: 30rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        padding: 30rpx;
    }

    // message 其他信息
    .message {
        margin-top: 30rpx;
        height: 306rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        padding: 30rpx;
        font-size: 28rpx;
        color: black;
        margin-bottom: 30rpx;

        .textarea {
            height: 306rpx;
        }
    }

    // 提交按钮
    .button {
        width: 570rpx;
        height: 98rpx;
        background-color: #1bc078;
        border-radius: 49rpx;
        line-height: 98rpx;
        font-size: 28rpx;
        color: #ffffff;
    }

    .footer {
        height: var(--status-bar-height);
    }
</style>
